<mat-toolbar class="title" color="primary">
    <div>{{'LINK.settings' | translate}}</div>
    <button mat-icon-button (click)="onNoClick()">
      <fa-icon icon="times"></fa-icon>
    </button>
  </mat-toolbar>
  <div mat-dialog-content>
    <div class="example-container">
      <div>
        <mat-form-field appearance="fill">
          <mat-label>{{'widgets.clickhouseChart.settings.chartTitle' | translate}}</mat-label>
          <input matInput [(ngModel)]="chartTitle" (ngModelChange)="updateResult(false, $event)">
        </mat-form-field>
  
        <mat-form-field appearance="fill">
          <mat-label >{{'widgets.clickhouseChart.settings.chartType' | translate}}</mat-label>
          <mat-select [(ngModel)]="chartType" (selectionChange)="updateResult()">
            <mat-option *ngFor="let type of chartTypeList" [value]="type">
              {{ type | titlecase }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        
        <mat-form-field appearance="fill">
          <mat-label >{{'widgets.clickhouseChart.settings.format' | translate}}</mat-label>
          <mat-select [(ngModel)]="format" (selectionChange)="updateResult()">
            <mat-option value="row">Default</mat-option>
            <mat-option value="number">Numbers</mat-option>
            <mat-option value="short">Short</mat-option>
            <mat-option value="bytes">Bytes</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      
      <div>
        <mat-form-field appearance="fill">
          <mat-label>{{'widgets.clickhouseChart.settings.panelDataSource' | translate}}</mat-label>
          <mat-select [(ngModel)]="panelDataSource" (selectionChange)="onPanelDatasource()">
            <mat-option value="Clickhouse">{{'widgets.clickhouseChart.settings.clickhouse' | translate}}</mat-option>
          </mat-select>
        </mat-form-field>
  
        <mat-form-field appearance="fill">
          <mat-label>{{'widgets.clickhouseChart.settings.database' | translate}}</mat-label>
          <mat-select [(ngModel)]="database" (selectionChange)="onDatabase()">
              <mat-option *ngFor="let item of databaseList" [value]="item.name">
                {{ item.name }}
              </mat-option>
            </mat-select>
        </mat-form-field>
  
        <mat-form-field appearance="fill">
          <mat-label>{{'widgets.clickhouseChart.settings.tables' | translate}}</mat-label>
          <mat-select [(ngModel)]="table" (selectionChange)="onTable()">
            <mat-option *ngFor="let item of tableList" [value]="item.name">
              {{ item.name }}
            </mat-option>
          </mat-select>
        </mat-form-field>
  
        <button mat-raised-button class="setting-btn-ok" (click)="addRecord()">{{'LINK.buttons.add' | translate}}</button>
      </div>
  
      <div>
        <h5>Query</h5>
        <table mat-table [dataSource]="dataSource" style="width: 100%; margin-bottom: 1rem;" #matTable> 
  
          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef> {{'widgets.clickhouseChart.settings.number' | translate}} </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
          </ng-container>
  
          <ng-container matColumnDef="panelDataSource">
            <th mat-header-cell *matHeaderCellDef>{{'widgets.clickhouseChart.settings.panelDataSource' | translate}}</th>
            <td mat-cell *matCellDef="let element"> {{element.panelDataSource}} </td>
          </ng-container>
  
          <ng-container matColumnDef="database">
            <th mat-header-cell *matHeaderCellDef> {{'widgets.clickhouseChart.settings.database' | translate}} </th>
            <td mat-cell *matCellDef="let element"> {{element.database}} </td>
          </ng-container>
  
          <ng-container matColumnDef="table">
            <th mat-header-cell *matHeaderCellDef> {{'widgets.clickhouseChart.settings.table' | translate}}  </th>
            <td mat-cell *matCellDef="let element"> {{element.table}} </td>
          </ng-container>
  
          <ng-container matColumnDef="buttons">
            <th mat-header-cell *matHeaderCellDef> 
              <fa-icon icon="edit"></fa-icon>
            </th>
            <td mat-cell *matCellDef="let element" style="text-align: right;">
              <button mat-icon-button class="setting-btn-ok" aria-label="Delete"
                (click)="deleteRecord(element.id)">
                <fa-icon icon="trash-alt"></fa-icon>
              </button>
              <button mat-icon-button class="setting-btn-ok" aria-label="Edit"
                (click)="editRecord(element)">
                <fa-icon icon="edit"></fa-icon>
              </button>
            </td>
          </ng-container>
          
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-tab-group mat-stretch-tabs
            [selectedIndex]="!!apiQueryValue ? 1 : 0"
            style="margin-bottom: 1rem;"
            class="mat-elevation-z4"
            *ngIf="detailShow" (selectedTabChange)="loadRaw($event)">
            
            <mat-tab label="Fields"> 
            <div style="padding: 1rem">
                <mat-form-field appearance="fill" style="width: 100%;"><!-- Time Column -->
                <mat-label>{{'widgets.clickhouseChart.settings.timeColumn' | translate}}</mat-label>
                <mat-select [(ngModel)]="timeColumn" (selectionChange)="onTimeColumn()">
                    <mat-option *ngFor="let item of timeColumnList" [value]="item.name">
                    {{ item.name }}
                    </mat-option>
                </mat-select> 
                </mat-form-field>
                <div class="resolution-wrapper">
                  <mat-form-field appearance="fill" style="width: 100%;">
                    <mat-label>{{'widgets.clickhouseChart.settings.resolution' | translate}}</mat-label>
                    <input matInput type='number' class="resolution" [(ngModel)]="resolution" (ngModelChange)="onResolution()" [disabled]="autoMode">
                    <div matSuffix>S</div>
                    <mat-checkbox color="primary" matPrefix [(ngModel)]="autoMode" (ngModelChange)="onResolution()">{{ 'widgets.clickhouseChart.settings.autoMode' | translate }}</mat-checkbox>
                  </mat-form-field>
                </div>
                <mat-form-field appearance="fill" style="width: 100%;"><!-- Counter -->
                <mat-label>{{'widgets.clickhouseChart.settings.counter' | translate}}</mat-label>
                <mat-select 
                    [(ngModel)]="counter"
                    (selectionChange)="onCounter()">
                    <mat-option *ngFor="let item of counterList" [value]="item.name">
                    {{ item.name }}
                    </mat-option>
                </mat-select>
                
                </mat-form-field>
                <mat-form-field appearance="fill" style="width: 100%;"><!-- Tag -->
                <mat-label>{{'widgets.clickhouseChart.settings.tag' | translate}}</mat-label>
                <mat-chip-list class="chips-container tags" (click)="selectTags.open()">
                    <mat-chip class="custom-mat-chip"
                    *ngFor="let item of tags.value"
                    [selectable]="false"
                    [removable]="true"
                    (click)="selectTags.open()"
                    (removed)="remove(item, 'tags')">
                    {{item}}
                    <mat-icon matChipRemove >cancel</mat-icon>
                    </mat-chip>
                </mat-chip-list>
                <mat-select
                    multiple
                    class="chips-container-selector tags"
                    [formControl]="tags"
                    #selectTags
                    (selectionChange)="onDetails('tags')">
                    <mat-option *ngFor="let item of tagsList" [value]="item.name">
                    {{item.name}}
                    </mat-option>
                </mat-select>
                </mat-form-field>
                <mat-form-field appearance="fill" style="width: 100%;"><!-- Values -->
                <mat-label>{{'widgets.clickhouseChart.settings.values' | translate}}</mat-label>
                <mat-select
                    [(ngModel)]="operator" 
                    (selectionChange)="onOperator()">
                    <mat-option *ngFor="let item of operatorList" [value]="item.value">
                        {{ item.name }}
                    </mat-option>
                </mat-select
                >
                </mat-form-field>
                <mat-form-field appearance="fill" style="width: 100%;">
                    <mat-label>{{'widgets.clickhouseChart.settings.limit' | translate}}</mat-label>
                    <input matInput type='number' [(ngModel)]="limit" (ngModelChange)="onLimit()">
                  </mat-form-field>
            </div>
            </mat-tab>
            <mat-tab label="Query">
                <div style="padding: 1rem">
                    <label>{{'widgets.clickhouseChart.settings.variables' | translate}}</label>
                    <blockquote>:table:</blockquote>
                    <blockquote>:measurement:</blockquote>
                    <blockquote>:from:</blockquote>
                    <blockquote>:to:</blockquote>
                    <blockquote>:resolution:</blockquote>
                    <blockquote>:limit:</blockquote>
                    <div>
                    <mat-form-field appearance="fill" style="width: 100%;">
                        <mat-label>{{'widgets.clickhouseChart.settings.apiQueryValue' | translate}}</mat-label>
                        <textarea  matInput [(ngModel)]="apiQueryValue" (change)="onDetails('raw', apiQueryValue)" ></textarea>
                    </mat-form-field>
                    </div>
                </div>
            </mat-tab>
        </mat-tab-group>
      </div>
    </div>
  </div>
  
  <div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
    <button mat-raised-button (click)="onNoClick()">{{'LINK.buttons.cancel' | translate}}</button>
    <button mat-raised-button class="setting-btn-ok" [mat-dialog-close]="outputObject" cdkFocusInitial [disabled]='isInvalid'>{{'LINK.buttons.save' | translate}}</button>
  </div>
  